<template>
	<view class="centents">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" labelWidth='80' :model="model1" :rules="rules" ref="form1">
			<u-form-item label="宠物类型" prop="userInfo.name" borderBottom ref="item1">
				<u-radio-group v-model="radiovalue1" placement="column">
					<view class="setradio">
						<view v-for="(item, index) in radiolist1" class="radioleft">
							<u-radio :customStyle="{marginRright:'8px'}"  :key="index"
								:label="item.name" :name="item.name">
							</u-radio>
						</view>
					</view>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="宠物姓名" prop="userInfo.name" borderBottom ref="item1">
				<up-input placeholder="请输入宠物姓名" border="none" v-model="radiovalue1"></up-input>
			</u-form-item>
			<u-form-item @click="selectdate" label="出生日期" prop="userInfo.name" borderBottom ref="item1">
				<u--input v-model="radiovalue1" disabled disabledColor="#ffffff" placeholder="请选择性别"
					border="none"></u--input>
				<template #right>
					<u-icon name="arrow-right"></u-icon>
				</template>
			</u-form-item>
			<u-form-item @click="selectdate" label="陪伴日期" prop="userInfo.name" borderBottom ref="item1">
				<u--input v-model="radiovalue1" disabled disabledColor="#ffffff" placeholder="请选择萌宠到家日期"
					border="none"></u--input>
				<template #right>
					<u-icon name="arrow-right"></u-icon>
				</template>
			</u-form-item>
			<u-form-item label="宠物性别" prop="userInfo.name" borderBottom ref="item1">
				<u-radio-group v-model="radiovalue1" placement="column">
					<view class="setradio">
						<view class="setradio">
							<view v-for="(item, index) in radiolist2" class="radioleft">
								<u-radio :customStyle="{marginRright:'8px'}"  :key="index"
									:label="item.name" :name="item.name">
								</u-radio>
							</view>
						</view>
					</view>
				</u-radio-group>
			</u-form-item>
			<u-form-item @click="selectPick(2)" label="宠物品种" prop="userInfo.name" borderBottom ref="item1">
				<u--input v-model="radiovalue1" disabled disabledColor="#ffffff" placeholder="请选择性别"
					border="none"></u--input>
				<template #right>
					<u-icon name="arrow-right"></u-icon>
				</template>
			</u-form-item>
			<u-form-item @click="selectPick(1)" label="宠物体重" prop="userInfo.name" borderBottom ref="item1">
				<u--input v-model="radiovalue1" disabled disabledColor="#ffffff" placeholder="请选择性别"
					border="none"></u--input>
				<template #right>
					<u-icon name="arrow-right"></u-icon>
				</template>
			</u-form-item>
			<u-form-item label="是否绝育" prop="userInfo.name" borderBottom ref="item1">
				<u-radio-group v-model="radiovalue1" placement="column">
					<view class="setradio">
						<view class="radioleft">
							<u-radio :customStyle="{marginRright:'8px'}" :key="1"
								label="是" name="1">
							</u-radio>
						</view>
						<view class="radioleft">
							<u-radio :customStyle="{marginRright:'8px'}" :key="2"
								label="否" name="2">
							</u-radio>
						</view>
						
					</view>
				</u-radio-group>
			</u-form-item>
			<view class="fbtn">
				<up-button type="primary" :shape="'circle'" text="保存" @click="petsave"></up-button>
			</view>
		</u--form>
		<u-datetime-picker @confirm="selectdateVal" @cancel="showDate=false" :minDate="946684800000"
			:maxDate="new Date().getTime()" :show="showDate" v-model="radiovalue1" mode="date"></u-datetime-picker>
		<u-picker ref="uPicker" :visibleItemCount='5' @confirm="selectshow=false" @cancel="selectshow=false" :show="selectshow" :columns="columns"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showDate: false,
				selectshow: false,
				radiovalue1: '',
				label:'name',
				columns: [],
				petoptin1:['10kg','15kg'],
				petoptin2:['金毛','边牧','中华田园狗'],
				radiolist1: [{
						name: '喵星人'
					},
					{
						name: '汪星人'
					},
				],
				radiolist2: [{
						name: '男'
					},
					{
						name: '女'
					},
				],
				model1: {
					userInfo: {
						name: 'uview-plus UI',
						sex: '',
					},
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false
			};
		},
		methods: {
			selectdate(e) {
				this.showDate = true
			},
			selectdateVal(v) {
				console.log(v, 'test')
				this.showDate = false
			},
			selectPick(v){
				this.columns=[]
				this.columns.push(this[`petoptin${v}`])
				this.selectshow=true
			},
			petsave() {
				uni.reLaunch({
					url:'/petselfinfo/mypetbase'
				})
			},
		},
	};
</script>
<style lang="scss" scoped>
	.centents {
		padding: 24rpx;
	}

	.setradio {
		display: flex;
		align-items: center;
	}
	.fbtn{
		padding-top: 40rpx;
	}
	.radioleft{
		padding-right: 16rpx;
	}
</style>